<script setup>
import { User, Money, Scissor } from '@element-plus/icons-vue'
</script>

<template>
  <div class="overview">
    <div>患者概况</div>
    <div class="card">
      <div>
        <div class="total">888,999</div>
        <div>门急诊人次</div>
        <div>
          <el-icon color="#0563FF" size="20px"><User /></el-icon>
        </div>
      </div>
      <div>
        <div class="total">888,999</div>
        <div>在院人数</div>
        <div>
          <el-icon color="#0563FF" size="20px"><User /></el-icon>
        </div>
      </div>
      <div>
        <div class="total">888,999</div>
        <div>已预约手术数量</div>
        <div>
          <el-icon color="#0563FF" size="20px"><Scissor /></el-icon>
        </div>
      </div>
      <div>
        <div class="total">888,999</div>
        <div>已完成手术数量</div>
        <div>
          <el-icon color="#0563FF" size="20px"><Scissor /></el-icon>
        </div>
      </div>
    </div>
    <div class="card">
      <div>
        <div class="total">888,999</div>
        <div>出院人次</div>
        <div>
          <el-icon color="#0563FF" size="20px"><User /></el-icon>
        </div>
      </div>
      <div>
        <div class="income">88,999</div>
        <div>门急诊收入(万元)</div>
        <div>
          <el-icon color="#F5BC2F" size="24px"><Money /></el-icon>
        </div>
      </div>
      <div>
        <div class="income">88,999</div>
        <div>住院收入(万元)</div>
        <div>
          <el-icon color="#F5BC2F" size="24px"><Money /></el-icon>
        </div>
      </div>
      <div>
        <div class="income">88,999</div>
        <div>医疗服务收入(万元)</div>
        <div>
          <el-icon color="#F5BC2F" size="24px"><Money /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.overview {
  min-width: 460px;
  height: 220px;
  background: var(--vt-c-white);
  margin: 0 12px 12px 0;
  padding: 20px;
  font-weight: bold;
  font-size: 18px;

  .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: normal;

    > div {
      text-align: center;
    }
    .total {
      color: #2363df;
      font-size: 18px;
      font-weight: bold;
    }
    .income {
      color: #f5bc2f;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
